<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>电影列表</title>
  <style>
    label{
      display: block;
      margin:10px;
    }
    ul{
      list-style: none;
      margin: 50px auto;
      width:1000px;
      display:flex;
      flex-wrap: wrap;
    }
    li{
      width:27%;
      margin:20px 15px;
      padding:10px;
      box-shadow:  0 0 4px #999;
      border-radius: 10px;
    }
    li div{
      width:100%;
      height:240px;
    }
    li img{
      width:100%;
      height:240px;
    }
    li h2{
      font-size: 20px;
      width:180px;
      color:darkgreen;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    p{
      color:#999;
      font-size: 14px;
    }
    a{
      text-decoration: none;
    }
    .center{
      text-align: center;
    }
  </style>
</head>
<body>
  <%- include common %>
  <%- include('head', {title:"电影列表"} )%>
  <div class="center">
    <button onclick="location.href='/list?rating.average=1'">评分升序</button>
    <button onclick="location.href='/list?rating.average=-1'">评分降序</button>
    <button onclick="location.href='/list?year=1'">年份升序</button>
    <button onclick="location.href='/list?year=-1'">年份降序</button>
  </div>
  <div class="center">
    <input type="text" placeholder="请输入搜索关键字" id="keyword">
    <button id="sbtn">点击搜索</button>
  </div>
    <ul>
     <%  result.forEach((item,index)=>{  %>
          <li>
            <a href="/mv?mid=<%- item.id %>">
              <div >
                <img src="<%- item.images.large.replace(/img7/,'img3')   %>" alt="">
               </div>
               <h2><%- item.title %></h2>
               <p>年份: <%- item.year%> </p>
               <p>评分: <%- item.rating.average %></p>
               <p>分类: <%- item.genres %></p>
            </a>
          </li>
     <%  })  %>
    </ul>
   <%-  include foot %>

   <script>
     $("#sbtn").click(function(){
       window.location.href = "/list?keyword="+$("#keyword").val()
     })
   </script>
</body>
</html>